<template>
  <div class="home-swiper">
    <swiper :options="swiperOption">
      <swiper-slide
        v-for="item in swiperList" :key="item.id"
      >
        <a :href="item.href"><img :src="item.imgUrl" alt=""></a>
      </swiper-slide>
      <div class="swiper-pagination"  slot="pagination"></div>
    </swiper>
  </div>
</template>
<script>
export default {
  data () {
    return {
      swiperList: [],
      swiperOption: {
        loop: true,
        pagination: '.swiper-pagination',
        autoplay: 2500
      }
    }
  },
  created () {
    this.getSwiperList()
  },
  methods: {
    async getSwiperList () {
      const { data: res } = await this.$axios.get('home/indexswipper')
      if (res.code === 1) {
        this.swiperList = res.data
      }
    }
  }
}
</script>
<style lang="scss" scoped>
@import '../../assets/css/mixin';
.home-swiper {
  width: 100%;
  height: px2rem(376 / 2);
  margin: 0 auto;
  background: #ccc;
  z-index: 2;
  .swiper-slide {
    width: 100% !important;
    img {
      width: 100% !important;
    }
  }
  /deep/ .swiper-pagination-bullet-active {
    background: #fff;
  }
}
</style>
